/*
 *@description:订单管理
 *@Author:@reynold
 *@Date:2025-03-22:03
 *@Update:2025-03-22 11:05:03
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div class="tab_box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="first">
          <!-- 表格 -->
          <el-table :data="data.tableData" style="width: 100%">
            <el-table-column
              v-for="(item, index) in data.tableHeader" :key="item" :label="item" :prop="index">
              <template slot-scope="scope">
                {{scope.status}}
                <el-tag type="success" size="mini" effect="dark" v-if="scope.row.status == '待派单' && item =='状态'">待派单</el-tag>
                <el-tag type="warning" size="mini" effect="dark" v-else-if="scope.row.status =='待接单'&& item =='状态'">待接单</el-tag>
                <span v-else>{{scope.row[index]}}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button class="columnBtn1" type="text" size="small" @click="showOrder(scope.row)" >详情</el-button>
                <el-button class="columnBtn2" type="text" size="small" @click="sendOrder(scope.row)" v-if="scope.row.status == '待派单'">派单</el-button>
                <el-button class="columnBtn3" type="text" size="small" @click="resetOrder(scope.row)" v-else>取消派单</el-button>
              </template>
            </el-table-column>
          </el-table>
          
            <!-- 分页 -->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="待支付" name="second">
        </el-tab-pane>
        <el-tab-pane label="待派单" name="third">
        </el-tab-pane>
        <el-tab-pane label="待接单" name="fourth">
        </el-tab-pane>
        <el-tab-pane label="待服务" name="fifth">
        </el-tab-pane>
        <el-tab-pane label="待确认" name="six"> 
        </el-tab-pane>
        <el-tab-pane label="已完成" name="seventh">
        </el-tab-pane>
      </el-tabs>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
// import Tabpan from './tabPaneItem.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data(){
    return {
      pageQuery:{
        pageSize:10,
        pageNum:1
      },
      total:100,
      currentPage: 4,
      activeName:'first',
      data:{
        tableHeader:{orderNum:'订单编号',orderTime:'下单时间',price:'总价',status:'状态',customId:'顾客ID',employeeId:'员工ID'},
        tableData:[
          {
            orderNum:'1231',
            orderTime: '2016-05-02',
            price:1230,
            status:'待派单',
            customId:'456',
            employeeId:'987'
          }
        ]
      }
    }
  },
  methods:{
    handleSizeChange(val) {
      this.pageQuery = {
        pageNum:1,
        pageSize:10
      }
      this.pageQuery.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.pageQuery = {
        pageNum:1,
        pageSize:10
      }
      this.pageQuery.pageNum = val
      this.getOrderList()
    },
    handleClick(tab, event) {
      this.data = {}
      if(tab.name == 'first'){
        console.log('first');
        this.getOrderList()
      }
    },
    // 获取所有订单数据
    getOrderList(){
      instance.post('/order/list',this.pageQuery).then(res=>{
        this.data = res.data.data.list
        this.total = res.data.data.total
      })
    },
    // 查看订单详情
    showOrder(scope){
      console.log(scope);
    },
    // 派单的方法
    sendOrder(scope){
      console.log('派单');
      instance.post('/order/sendOrder',scope.id).then(res=>{
        this.getOrderList()
        utils.showSuccess(res.data.message)
      })
    },
    // 取消派单
    resetOrder(scope){
      console.log('取消派单');
      instance.post('/order/resetOrder',scope.id).then(res=>{
        this.getOrderList()
        utils.showSuccess(res.data.message)
      })
    }
  },
  components:{
    Card
  },
  created(){
    this.getOrderList()
  }
}
</script>

<style lang="less" scoped>
.tab_box {
  /deep/ .el-tabs__item.is-active {
    color:#188b8f;
  }
  /deep/ .el-tabs__active-bar{
    background-color: #188b8f;
  }
}
</style>